<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-red" :isBack="false">
				<block slot="content">我的</block>
			</cu-custom>
			<view class="hearder">
				<!-- 轮播 -->
				<view class="lunboswiper">
					<view class="backgroudred"></view>
					<view class="iconbiao">
						<navigator url="/page_myauction/myauction/myauction" class="main animation-slide-top"
							:style="[{animationDelay: '0.1s'}]">
							<text class="image iconfont">&#xe600;</text>
							<view class="text">
								<span>我的关注</span>
							</view>
						</navigator>
						<navigator class="main animation-slide-top"
							:style="[{animationDelay: '0.1s'}]" @click="goPhoneBtn('17771212121')">
							<text class="image iconfont">&#xe61d;</text>
							<view class="text">
								<span>联系我们</span>
							</view>
						</navigator>
					</view>
					<view @click="gologin" class="iconbottom animation-slide-bottom" :style="[{animationDelay: '0.2s'}]"
						v-if="personalList.userName == undefined">
						<image class="image" src="/static/home/128/my.png" mode="aspectFill"></image>
						<text>账号未登录，请登录！</text>
					</view>
					<view class="iconbottom animation-slide-bottom" :style="[{animationDelay: '0.2s'}]" v-else>
						<image class="image"
							:src="$getFileAccessHttpUrl(personalList.avatar)"
							mode="aspectFill"></image>
						<text>{{personalList.userName }}</text>
					</view>
				</view>

			</view>

			<block v-if="token && auctionlistData.length >= 0">
				<view class="scrollboxpeople">
					<view class="title">
						<view class="text">我的拍卖会</view>
						<navigator class="span" url="/pages/beatsell/beatsell">更多></navigator>
					</view>
				</view>
				<view class="scrolcontent">
					<empty v-if="auctionlistData.length == 0"></empty>
					<view v-else class="ul" v-for="(item,index) in auctionlistData" :key="index" @click="godetail(item,1)">
						<view class="left">
							<image class="image" :src="$getFileAccessHttpUrl(item.icon)" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="h6">{{item.title}}</view>
							<view class="bottom">
								<text>{{item.statusText}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="scrollboxpeople">
					<view class="title">
						<view class="text">我的竞拍</view>
						<navigator class="span" url="/page_myauction/auctionlist/auctionlist">更多></navigator>
					</view>
				</view>
				<view class="scrolcontent">
					<empty v-if="auctionbiddinglistData.length == 0"></empty>
					<view v-else class="ul" v-for="(item,index) in auctionbiddinglistData" :key="index"
						@click="godetail(item,2)">
						<view class="left">
							<image class="image" :src="$getFileAccessHttpUrl(item.icon)" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="h6">{{item.title}}</view>
							<view class="bottom">
								<text>{{item.statusText}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>


			<view class="scrollboxpeople">
				<view class="title">
					<view class="text">我的工具箱</view>
				</view>
			</view>

			<view class="holdall">
				<!-- <view class="shadow-holdall">
					<view class="padding flex text-center text-grey bg-white">
						<navigator url="/pages/mydeposit/mydeposit"
							class="flex flex-sub flex-direction solid-right animation-slide-top"
							:style="[{animationDelay: '0.1s'}]">
							<view class="text-xl text-green">
								<svg class="icon image" aria-hidden="true">
									<use xlink:href="#actionicon_baozhengjinguanli-copy-copy"></use>
								</svg>
							</view>
							<view class="font">我的保证金</view>
						</navigator>
						<view class="flex flex-sub flex-direction animation-slide-top"
							:style="[{animationDelay: '0.1s'}]">
							<view class="text-xl text-green">
								<svg class="icon image" aria-hidden="true">
									<use xlink:href="#actionkefu"></use>
								</svg>
							</view>
							<view class="font">联系我们</view>
						</view>
					</view>
					<view class="padding flex text-center text-grey bg-white">
						<view v-if="$store.getters.wxopenid == '' || $store.getters.wxopenid == undefined "
							@click.stop="bindwx" class="flex flex-sub flex-direction solid-right animation-slide-top"
							:style="[{animationDelay: '0.2s'}]">
							<view class="text-xl text-green">
								<svg class="icon image" aria-hidden="true">
									<use xlink:href="#actionweixindenglu"></use>
								</svg>
							</view>
							<view class="font">绑定小程序</view>
						</view>
						<navigator url="/pages/auctionlist/auctionlist"
							class="flex flex-sub flex-direction animation-slide-top"
							:style="[{animationDelay: '0.3s'}]">
							<view class="text-xl text-green">
								<svg class="icon image" aria-hidden="true">
									<use xlink:href="#actionliebiao"></use>
								</svg>
							</view>
							<view class="font">我的竞拍列表</view>
						</navigator>
					</view>
					<view class="padding flex text-center text-grey bg-white">
						<view v-if="!token" @click="gologin" class="flex flex-sub flex-direction animation-slide-top"
							:style="[{animationDelay: '0.2s'}]">
							<view class="text-xl text-green">
								<svg class="icon image" aria-hidden="true">
									<use xlink:href="#actiondenglu"></use>
								</svg>
							</view>
							<view class="font">登录</view>
						</view>
						<view v-if="token" @click="binglayout" class="flex flex-sub flex-direction animation-slide-top"
							:style="[{animationDelay: '0.2s'}]">
							<view class="text-xl text-green">
								<svg class="icon image" aria-hidden="true">
									<use xlink:href="#actiontuichu"></use>
								</svg>
							</view>
							<view class="font">退出</view>
						</view>
					</view>
				</view> -->
				<!-- 列表list-->
				<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
					<navigator url="/page_myauction/mydeposit/mydeposit" class="cu-item arrow animation-slide-bottom"
						:style="[{animationDelay: '0.1s'}]">
						<view class="content">
							<uni-icons class="icon" type="gear-filled" size="23"></uni-icons>
							<text class="text-grey">我的保证金</text>
						</view>
					</navigator>
					<!-- <view v-if="$store.getters.wxopenid == '' || $store.getters.wxopenid == undefined "
						@click.stop="bindwx" class="cu-item arrow animation-slide-bottom"
						:style="[{animationDelay: '0.2s'}]" url="/pages/login/loginedit" hover-class="none">
						<view class="content">
							<uni-icons class="icon" type="gear-filled" size="23"></uni-icons>
							<text class="text-grey">绑定小程序</text>
						</view>
					</view> -->
					<navigator url="/page_myauction/auctionlist/auctionlist" class="cu-item arrow animation-slide-bottom"
						:style="[{animationDelay: '0.3s'}]">
						<view class="content">
							<uni-icons class="icon" type="gear-filled" size="23"></uni-icons>
							<text class="text-grey">我的竞拍列表</text>
						</view>
					</navigator>
					<navigator v-if="token" class="cu-item arrow animation-slide-bottom" url="/pages/user/userdetail"
						:style="[{animationDelay: '0.4s'}]">
						<view class="content">
							<uni-icons class="icon" type="gear-filled" size="23"></uni-icons>
							<text class="text-grey">设置</text>
						</view>
					</navigator>
					<!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.5s'}]" v-if="!token" @click="gologin">
						<view class="content" >
						    <uni-icons class="icon" type="gear-filled" size="23"></uni-icons>
							<text class="text-grey">登录</text>
						</view>
					</view> -->
					<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.5s'}]"
						@click="clearstore">
						<view class="content">
							<uni-icons class="icon" type="gear-filled" size="23"></uni-icons>
							<text class="text-grey">清除缓存</text>
						</view>
					</view>
					<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.6s'}]" v-if="token"
						@click="binglayout">
						<view class="content">
							<uni-icons class="icon" type="gear-filled" size="23"></uni-icons>
							<text class="text-grey">退出</text>
						</view>
					</view>
				</view>
			</view>


			<!-- 			
		  <view class="padding flex text-center text-grey bg-white shadow-warp">
		    <view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]">
		      <view class="text-xl text-orange">{{personalList.userName}}</view>
			  <view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
		    </view>
		    
		    <view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
		      <view class="text-xl text-green">{{personalList.wxNkname?personalList.wxNkname:'员工'}}</view>
		      <view class="margin-top-sm"><text class="cuIcon-news"></text> 微信名</view>
		    </view>
		  </view> -->
			<!-- <view class="onejian" v-if="$store.getters.wxopenid || $store.getters.wxopenid == undefined ">
			  <view class="span">绑定微信，发现更多精彩</view>
			  <view class="image" @click="bindwx">
				  <image src="/static/home/128/logo.png" mode='aspectFill' class="wx"></image>
			  </view>
		  </view> -->

		</scroll-view>

		<!-- 绑定微信 -->
		<getuser ref="getuser" :firstclick="true" :wxshow="wxshow"></getuser>
	</view>
</template>

<script>
	import api from '@/api/api'
	import {
		USER_INFO
	} from "@/common/util/constants"
	import server from '@/api/server.js'
	export default {
		name: "people",
		data() {
			return {
				token: '',
				wxshow: false,
				personalList: {
					avatar: '',
					realname: '',
					username: '',
					post: ''
				},
				positionUrl: '/sys/position/list',
				departUrl: '/sys/user/userDepartList',
				userUrl: '/sys/user/queryById',
				postUrl: '/sys/position/queryByCode',
				userId: '',
				id: '',
				params: {
					pageNo: 1,
					pageSize: 5
				},
				auctionlistData: [],
				auctionbiddinglistData: [],
			};
		},
		watch: {
			// cur: {
			// 	immediate: true,
			// 	handler() {
			// 		console.log('watch', this.cur)
			// 		this.userId = this.$store.getters.userid;
			// 		this.load()
			// 	},
			// },
		},
		mounted() {
			this.getStorage()
			try {
			    const storage_apiauctionlist = uni.getStorageSync("storage_apiauctionlist");
			    if(storage_apiauctionlist) {
					this.auctionlistData = storage_apiauctionlist
			    }
				const storage_apiauctionbiddinglist = uni.getStorageSync("storage_apiauctionbiddinglist");
				if(storage_apiauctionbiddinglist) {
					this.auctionbiddinglistData = storage_apiauctionbiddinglist
				}
			} catch(e){
			    //错误
				console.log('错误',e)
			}
			this.$nextTick(function(){
				this.token = uni.getStorageSync(USER_INFO) == '' ? false : true
				if(this.token){
					this.apiauctionlist() //个人中心-我的报名（拍卖会）

				
				}
			})
			
			


		},
		methods: {
			// 联系我们
			goPhoneBtn(val) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: val,
					// 成功回调
					success: (res) => {
					},
					// 失败回调
					fail: (res) => {
					}
				});
			},
			apiauctionlist() {
				server.auctionlist(this.params).then(res => {
					console.log('res', res)
					if(res.data.success){
						this.auctionlistData = res.data.result.records
						this.apiauctionbiddinglist() //个人中心-我的竞拍列表
					}

					//本地存储
					try{
						uni.setStorageSync('storage_apiauctionlist', res.data.result.records)
					} catch (e){
					    //错误
						console.log(e)
					}
				})
			},
			apiauctionbiddinglist() {
				server.auctionbiddinglist(this.params).then(res => {
					console.log('res', res)
					if(res.data.success){
						this.auctionbiddinglistData = res.data.result.records
					}
					//本地存储
					try{
						uni.setStorageSync('storage_apiauctionbiddinglist', res.data.result.records)
					} catch (e){
					    //错误
						console.log(e)
					}
				})
			},
			getStorage() {
				this.personalList = uni.getStorageSync(USER_INFO)
				console.log(this.personalList, 'personalList')
			},
			godetail(item, index) {
				console.log('item', item)
				if (index == 1) {
					uni.navigateTo({
						url: '/page_myauction/myauction/myauctionDetail?auctionId=' + item.auctionId
					})
				} else {
					uni.navigateTo({
						url: '/page_myauction/subjectdetail/subjectdetail?id=' + item.auctionItemId + '&auctionId=' + item
							.auctionId

					})
				}
			},
			//跳转到登录
			gologin() {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/login/login'
				})
			},
			//清除缓存
			clearstore(){
				uni.showModal({
					title: '提示',
					content: '确定清除缓存！',
					success: (showResult) => {
						if (showResult.confirm) {
							try {
								uni.clearStorageSync();
							} catch (e) {
								//错误
							}
						} else {
				
						}
				
					}
				})
			},
			//退出登录
			binglayout() {
				uni.showModal({
					title: '提示',
					content: '确定退出！',
					success: (showResult) => {
						if (showResult.confirm) {
							uni.navigateTo({
								// ? 后面加要传的参数， 多个参数用 & 隔开 
								url: '/pages/common/exit'
							})
						} else {

						}

					}
				})
			},
			bindwx() {
				this.wxshow = true
				// that.$tip.error(err.data.message)
				this.$nextTick(() => {
					this.$refs.getuser.openmodel()
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.UCenter-bg {
		/* #ifdef MP-WEIXIN */
		background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png');
		/* #endif */
		/* #ifndef MP-WEIXIN */
		background-image: url('/static/home/128/wenan.png');
		/* #endif */
		background-size: cover;
		height: 400rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}

	.onejian {
		text-align: center;
		font-size: 16px;
		margin-top: 25px;

	}

	.onejian .image .wx {
		color: #01b301;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-top: 10px;
	}

	.hearder {
		padding-bottom: 59px;
		background: white;

		.insearch {
			background-color: #B81D22;
			padding: 10px;
		}

		.lunboswiper {
			position: relative;

			.backgroudred {
				height: 150px;
				background: #B81D22;
				border-bottom-left-radius: 80%;
				border-bottom-right-radius: 80%;
			}
		}

	}

	/deep/.bg-gradual-pink {
		background-image: linear-gradient(45deg, #B81D22, #B81D22);
	}

	.iconbiao {
		position: absolute;
		top: 23px;
		display: flex;
		justify-content: space-around;
		width: 100%;

		.main {
			text-align: center;
			font-size: 19px;
			color: white;

			.image {
				width: 25px;
				height: 25px;
				font-size: 27px;
			}

			.text span {
				font-size: 12px;
			}
		}
	}

	.iconbottom {
		position: absolute;
		bottom: -41px;
		left: 50%;
		margin-left: -170px;
		text-align: center;
		font-size: 16px;
		color: black;
		width: 340px;

		.image {
			width: 60px;
			height: 60px;
			border-radius: 50px;
			overflow: hidden;
			background: white;
		}

		text {
			display: block;
		}
	}

	.page {
		background: white;
	}

	.scrolcontent {
		overflow-x: auto;
		float: left;
		width: 100%;
		white-space: nowrap;
		padding-left: 10px;
		height: 129px;
		.ul {
			padding: 5px;
			box-shadow: 1px 1px 13px 0px #eaeaea;
			display: inline-block;
			margin: 20px 10px 20px 0;
			border-radius: 10px;
			width: 70%;

			.left {
				float: left;
				width: 30%;
				width: 75px;
				height: 75px;

				.image {
					width: 75px;
					height: 75px;
					border-radius: 5px;
					overflow: hidden;
				}
			}

			.right {
				float: right;
				width: 70%;
				padding-left: 5px;
				width: -moz-calc(100% - 40px);
				width: -webkit-calc(100% - 40px);
				width: calc(100% - 75px);
				padding-left: 5px;
				height: 75px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.h6 {
					white-space: normal;
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.bottom {
					font-size: 12px;

					text {
						color: #B81D22;
					}
				}
			}
		}
	}

	.holdall {
		float: left;
		width: 100%;

		.image {
			width: 30px;
			height: 30px;
			background: #f42c2829;
			border-radius: 50%;
			padding: 5px;
		}

		.font {
			color: black;
			font-size: 12px;
		}

		.shadow-holdall {
			box-shadow: 1px 1px 13px 0px #eaeaea;
		}
	}

	.cu-list.menu>.cu-item .content {
		background-image: linear-gradient(90deg, #ffffff, #f6f6f6);

		.icon {
			color: #B81D22 !important;
			vertical-align: middle;
			margin-right: 5px;

			/deep/.uni-icons {
				color: #B81D22 !important;
			}
		}

	}
	/deep/.content .content_img uni-image{
		width: 65px!important;
	}
</style>
